<!doctype html><!--声明文档类型为html-->
<html><!--根标签 超文本标记语言-->
<!--99%是双标签 -->
	<head><!--头部 不可视化标签-->
		<meta charset="UTF-8"><!--utf-8 :国际编码-->
		<!--网页三要素-->
		<title>同学们-朱雀老师</title>
	    <meta name="Keywords" content="认真上课"><!--关键词-->
		<meta name="Description" content="描述">
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			li{list-style:none;}
			a{text-decoration:none;}
			/*
				外边距合并

				盒子没有包含关系的时候 两个盒子外边距相遇  会合并为较大的外边距
				盒子有包含关系的时候  当父元素没有border的时候 会发生外边距合并
				bfc模式 其实就是加一堵围墙 让外面无法影响里面的布局
				overflow float position 

			*/
			div{
				width:200px;
				height:150px;
				margin:80px;
				padding-top:50px;
				background-color:pink;
				border:1px solid red;
			}
			p{
				width:200px;
				height:200px;
				margin:20px;
				border:1px solid blue;
			}
			h1{
				width:100px;
				height:100px;
				border:1px solid orange;
				background-color:#fff;
			}
		</style>
	</head>
	<body> <!--身体:网页的内容.可视化标签-->
		<div>
			<h1></h1>
		</div>
		<p></p>
	</body>
</html>


